<template>
  <el-dialog
    title="运单详情"
    :visible.sync="open"
    width="1000px"
    append-to-body
    :before-close="cancel"
  >
    <div class="classify-wrapper">
      <div class="left">
        <div
          class="memu"
          v-for="(item, index) in menuList"
          :key="index"
          @click="changeModel(index, item.key)"
          :class="currentIndex == index ? 'selected' : ''"
        >
          {{ item.value }}
        </div>
      </div>
      <div class="right" ref="scroll" @scroll="handleScroll">
        <div class="main-content">
          <div class="bottom-content">
            <div ref="one">
              <h3>基本信息</h3>
              <h4>车辆基本信息</h4>
              <div>
                <el-table
                  v-loading="loading"
                  :border="true"
                  :data="msg.carData"
                  style="width: 100%; height: auto"
                >
                  <el-table-column
                    width="120"
                    label="车牌号"
                    align="center"
                    prop="carNumber"
                  />
                  <el-table-column
                    width="120"
                    label="车辆id"
                    align="center"
                    prop="carId"
                  />
                  <el-table-column
                    width="120"
                    label="车辆体积(方)"
                    align="center"
                    prop="carVolume"
                  />
                  <el-table-column
                    width="120"
                    label="车辆载重(kg)"
                    align="center"
                    prop="carLoad"
                  />
                  <el-table-column
                    width="120"
                    label="车辆长度(cm)"
                    align="center"
                    prop="carLength"
                  />
                  <el-table-column
                    width="120"
                    label="车辆宽度(cm)"
                    align="center"
                    prop="carWidth"
                  />
                  <el-table-column
                    width="120"
                    label="车辆高度(cm)"
                    align="center"
                    prop="carHeight"
                  />
                </el-table>
              </div>
              <h4>司机基本信息</h4>
              <div>
                <el-table
                  v-loading="loading"
                  :border="true"
                  :data="msg.driverData"
                  style="width: 100%; height: auto"
                >
                  <el-table-column
                    label="司机姓名"
                    align="center"
                    prop="name"
                  />
                  <el-table-column
                    label="司机电话"
                    align="center"
                    prop="mobile"
                  />
                  <el-table-column
                    label="司机年龄(岁)"
                    align="center"
                    prop="age"
                  />
                  <el-table-column
                    label="司机驾龄(年)"
                    align="center"
                    prop="licenseAge"
                  />
                  <el-table-column
                    label="司机驾驶证编号"
                    align="center"
                    prop="licenseNumber"
                  />
                </el-table>
              </div>
            </div>
            <div ref="two">
              <h3>任务详情</h3>
              <div>
                <el-table
                  v-loading="loading"
                  :border="true"
                  :data="msg.detail.list"
                  style="width: 100%; height: auto"
                >
                  <el-table-column
                    width="200"
                    label="发车时间"
                    align="center"
                    prop="departDate"
                  />
                  <el-table-column
                    width="200"
                    label="提货时间"
                    align="center"
                    prop="pickDate"
                  />
                  <el-table-column
                    label="运输线路"
                    align="center"
                    prop="transportLine"
                  />
                  <el-table-column
                    label="供应商"
                    align="center"
                    prop="supplier"
                  />
                  <el-table-column
                    label="物品数量"
                    align="center"
                    prop="goodsNum"
                  />
                  <el-table-column
                    label="物品单位"
                    align="center"
                    prop="goodsUnit"
                  />
                  <el-table-column label="备注" align="center" prop="remark" />
                </el-table>
              </div>
              <div class="card">
                <el-timeline>
                  <el-timeline-item
                    icon="el-icon-location-outline"
                    timestamp="发货方"
                    placement="top"
                  >
                    <div class="flex-layout"></div>
                  </el-timeline-item>
                  <el-timeline-item
                    icon="el-icon-location-outline"
                    timestamp="收货方"
                    placement="top"
                  >
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>
            <div ref="three">
              <h3>发车照片</h3>
              <div class="imgContainer">
                <el-image
                  v-for="(item, index) in msg.departImages"
                  :src="item"
                  :key="index"
                  :preview-src-list="msg.departImages"
                ></el-image>
              </div>
            </div>
            <div ref="four">
              <h3>提货照片</h3>
              <div class="imgContainer">
                <el-image
                  v-for="(item, index) in msg.pickedImages"
                  :src="item"
                  :key="index"
                  :preview-src-list="msg.pickedImages"
                ></el-image>
              </div>
            </div>
            <div ref="five">
              <h3>交付照片</h3>
              <div class="imgContainer">
                <el-image
                  v-for="(item, index) in msg.finishImages"
                  :src="item"
                  :key="index"
                  :preview-src-list="msg.finishImages"
                ></el-image>
              </div>
            </div>
            <div ref="six">
              <h3>车辆位置</h3>
              <div
                class="location"
                v-if="info.gpsId"
                :style="{
                  display: info.gpsId == '' || info.gpsId == null ? 'none' : '',
                }"
              >
                <baidu-map
                  class="map"
                  ak="PqqeGMn6pNyvOxnWwVLyexHQjwMtuzLn"
                  :center="map.center"
                  :zoom="map.zoom"
                  @ready="handel"
                >
                  <!--缩放-->
                  <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
                  <!--定位-->
                  <bm-geolocation
                    anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                    :showAddressBar="true"
                    :autoLocation="true"
                  ></bm-geolocation>
                  <!--点-->
                  <bm-marker
                    :position="map.center"
                    :icon="{
                      url: '/img/car.png',
                      size: { width: 25, height: 50 },
                    }"
                    :rotation="map.rotation"
                    animation="BMAP_ANIMATION_DROP"
                    @click="infoWindowOpen"
                  >
                    <!-- <bm-label :position="map.center" :content="carName" /> -->
                    <!--提示信息-->
                    <bm-info-window
                      style="width: 280px"
                      :show="map.show"
                      @close="infoWindowClose"
                    >
                      <br />
                      <table
                        class="car"
                        border="0px"
                        cellpadding="0"
                        cellspacing="0"
                      >
                        <tr>
                          <td>当前位置：</td>
                          <td>{{ info.addressDetail }}</td>
                        </tr>
                        <tr>
                          <td>车速(km/h)：</td>
                          <td>{{ info.speed }}</td>
                        </tr>
                        <tr>
                          <td>车辆当前状态：</td>
                          <td>{{ info.status }}</td>
                        </tr>
                        <tr>
                          <td>设备在线状态：</td>
                          <td>{{ info.online }}</td>
                        </tr>
                        <tr>
                          <td>设备定位时间：</td>
                          <td>{{ info.gpsTime }}</td>
                        </tr>
                        <tr>
                          <td>经度：</td>
                          <td>{{ info.lon }}</td>
                        </tr>
                        <tr>
                          <td>纬度：</td>
                          <td>{{ info.lat }}</td>
                        </tr>
                        <tr>
                          <td>里程(km):</td>
                          <td>{{ info.mileage }}</td>
                        </tr>
                      </table>
                    </bm-info-window>
                  </bm-marker>
                </baidu-map>
              </div>
            </div>
            <div ref="seven">
              <h3>司机轨迹</h3>
              <div>
                <el-table
                  v-loading="loading"
                  :border="true"
                  :data="msg.driverTrack"
                  style="width: 100%; height: auto"
                >
                  <el-table-column
                    label="操作人"
                    align="center"
                    prop="operator"
                  />
                  <el-table-column
                    width="200"
                    label="操作时间"
                    align="center"
                    prop="operatorTime"
                  />
                  <el-table-column
                    label="动作"
                    align="center"
                    prop="taskProcess"
                  >
                    <template slot-scope="scope">
                      <div
                        v-for="(item, index) in dict.type
                          .transport_task_process"
                        v-if="scope.row.taskProcess == item.value"
                      >
                        {{ item.label }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="经纬度"
                    align="center"
                    prop="location"
                  />
                  <el-table-column
                    label="详细地址"
                    align="center"
                    prop="addressDetail"
                  />
                </el-table>
              </div>
              <div id="container" style="height: 600px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  dicts: ["transport_task_process"],
  props: {
    // record: Object,
    open: Boolean,
    infoDetail: Object,
  },
  data() {
    return {
      map: {
        center: { lng: "", lat: "" },
        zoom: 12,
        show: true,
        dragging: true,
        rotation: null,
      },
      carName: "",
      allData: {},
      info: {},
      menuList: [
        { key: "one", value: "基本信息" },
        { key: "two", value: "任务详情" },
        { key: "three", value: "发车照片" },
        { key: "four", value: "提货照片" },
        { key: "five", value: "交付照片" },
        { key: "six", value: "车辆位置" },
        { key: "seven", value: "司机轨迹" },
      ],
      listData: [
        { name: "按时间扩大撒赖打开1" },
        { name: "按时间扩大撒赖打开2" },
        { name: "按时间扩大撒赖打开3" },
        { name: "按时间扩大撒赖打开4" },
        { name: "按时间扩大撒赖打开5" },
        { name: "按时间扩大撒赖打开6" },
      ], // 接口获取到的总数据
      listHeight: [], // 存放右边模块内容的高度
      scrollY: 0, // 右边滚动时的scrollTop
      rightTitHeight: 0, // 右边模块标题的高度
      currentIndex: 0, // 用于判断左边的高亮以及右边标题的内容显示
      flagShow: false, // 控制吸顶的标题 和 不吸顶的标题（显示与隐藏）
      dialogVisible: false,
      tabPosition: "left",
      list: [],
      msg: {
        carData: null,
        driverData: null,
        detail: { list: null, obj: null },
        pickedImages: null,
        driverTrack: null,
      },
      loading: true,
    };
  },

  watch: {
    open(newVal){
      if (newVal) {
        this.loading = false;
      }
    },
    infoDetail: {
      handler(newVal, oldVal) {
        if (newVal.gpsInfo == null) {
          newVal.gpsInfo = "";
        }
        this.allData = newVal;
        this.getDetail();
      },
      deep: true,
    },
  },
  methods: {
    getDetail() {
      
      this.info = this.allData.gpsInfo;
      this.map.center.lng = this.info.lon;
      this.map.center.lat = this.info.lat;
      this.map.rotation = this.info.direct;
      this.carName = this.allData.carNumber;
      let data = this.allData;
      this.$set(this.msg, "carData", [
        {
          carNumber: data.carNumber,
          carId: data.carId,
          carVolume: data.carVolume,
          carLoad: data.carLoad,
          carLength: data.carLength,
          carWidth: data.carWidth,
          carHeight: data.carHeight,
        },
      ]);
      this.$set(this.msg, "driverData", [
        {
          name: data.name,
          mobile: data.mobile,
          age: data.age,
          licenseAge: data.licenseAge,
          licenseNumber: data.licenseNumber,
        },
      ]);
      this.$set(this.msg.detail, "list", [
        {
          departDate: data.departDate,
          pickDate: data.pickDate,
          transportLine: data.transportLine,
          supplier: data.supplier,
          goodsNum: data.goodsNum,
          goodsUnit: data.goodsUnit,
          remark: data.remark,
        },
      ]);
      this.$set(this.msg.detail, "obj", {
        deliverName: data.deliverName,
        deliverMobile: data.deliverMobile,
        deliverAddress: data.deliverAddress,
        arrivalName: data.arrivalName,
        arrivalMobile: data.arrivalMobile,
        arrivalAddress: data.arrivalAddress,
      });
      this.$set(this.msg, "departImages", data.departImages.split(","));
      this.$set(this.msg, "pickedImages", data.pickedImages.split(","));
      this.$set(this.msg, "finishImages", data.finishImages.split(","));
      this.$set(this.msg, "driverTrack", data.driverTrackList);
      setTimeout(() => {
        //修改子组件的内容
        this.createMap();
      }, 50);
      this.loading = false;
    },
    handel({ BMap, map }) {
      // 禁止鼠标缩放
      map.disableDoubleClickZoom();
    },
    // 打开弹窗
    infoWindowOpen() {
      this.map.show = true;
    },
    // 关闭弹窗
    infoWindowClose() {
      this.map.show = false;
    },

    createMap() {
      var BMap = window.BMapGL;
      var map = new BMap.Map("container");
      let center = this.polyLine();
      for (const i in center) {
      let point = new BMap.Point(center[i].lng,center[i].lat)
      var marker = new BMap.Marker(point)
      map.addOverlay(marker)
      }
      // map.setCenter(point)
      let location = this.msg.driverTrack[0].location.split(",");
      var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL };
      map.addControl(new BMap.NavigationControl(opts));
      map.centerAndZoom(new BMap.Point(location[0], location[1]), 8);
      // 禁止鼠标缩放
      map.disableDoubleClickZoom();
      // map.enableScrollWheelZoom(true);
      var polyline = new BMapGL.Polyline([...this.polyLine()], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
      });
      map.addOverlay(polyline);
      
      let nowIcon = new BMap.Icon(
        require("../../../../../public/img/定位点.png"),
        new BMap.Size(47,47),{
          // 图标中央下端的尖角位置
          anchor:new BMap.Size(22,40),
          imageOffset:new BMap.Size(0,0)
        }
      )
    },
    polyLine() {
      let newArr = [];
      let list = [];
      this.msg.driverTrack.forEach((e) => {
        let lat = e.location.split(",")[0];
        let lng = e.location.split(",")[1];
        list.push([lat, lng]);
      });
      for (var i = 0; i < list.length; i++) {
        newArr.push(new BMapGL.Point(list[i][0], list[i][1]));
      }
      return newArr;
    },
    cancel() {
      this.$emit("refresh");
      this.map.show = true;
      this.currentIndex = 0;
    },
    submitForm() {},
    handleScroll(e) {
      let scrollY = this.$refs.scroll.scrollTop;
      if (
        scrollY >= this.$refs.one.offsetTop &&
        scrollY <= this.$refs.two.offsetTop
      ) {
        // console.log(scrollY,this.$refs.one.offsetTop)
        if (scrollY - this.$refs.one.offsetTop > 0) {
          this.currentIndex = 0;
        }
      } else if (
        scrollY >= this.$refs.two.offsetTop &&
        scrollY <= this.$refs.three.offsetTop
      ) {
        if (scrollY - this.$refs.two.offsetTop > 0) {
          this.currentIndex = 1;
        }
      } else if (
        scrollY >= this.$refs.three.offsetTop &&
        scrollY <= this.$refs.four.offsetTop
      ) {
        if (scrollY - this.$refs.three.offsetTop > 0) {
          this.currentIndex = 2;
        }
      } else if (
        scrollY >= this.$refs.four.offsetTop &&
        scrollY <= this.$refs.five.offsetTop
      ) {
        if (scrollY - this.$refs.four.offsetTop > 0) {
          this.currentIndex = 3;
        }
      } else if (
        scrollY >= this.$refs.five.offsetTop &&
        scrollY <= this.$refs.six.offsetTop
      ) {
        if (scrollY - this.$refs.five.offsetTop > 0) {
          this.currentIndex = 4;
        }
      } else if (
        scrollY >= this.$refs.six.offsetTop &&
        scrollY <= this.$refs.seven.offsetTop
      )
        if (scrollY - this.$refs.six.offsetTop > 0) {
          this.currentIndex = 5;
        } else {
          if (scrollY - this.$refs.seven.offsetTop > 0) {
            this.currentIndex = 6;
          }
        }
    },
    changeModel(index, key) {
      this.$refs[key].scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss">
.location {
  width: 100%;
  height: auto;
  // background-color: pink;
  .map {
    width: 100%;
    height: 400px;
  }
}

h3 {
  font-weight: bold;
}
.memu {
  padding: 15px 20px;
}

.selected {
  color: #1890ff;
}

.classify-wrapper {
  width: 100%;
  height: 70vh;
  background: #f7f7f7;
  display: flex;

  .left {
    width: 111px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .right {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0px 10px;

    .top-fixed-title {
      // !!!重要  红色区域
      position: fixed !important;
      top: 0 !important;
      z-index: 999 !important;
      background: #f00 !important;
    }

    .fixed-title {
      // !!!重要 绿色区域
      position: absolute;
      bottom: 0;
      z-index: 999;
      width: 249px;
      height: 45px;
      background: #0f0;
    }

    .main-content {
      position: relative;
      width: 100%;

      .top-title {
        height: 45px;
        background: #00f; // !!! 重要 蓝色区域
      }
    }
  }
}

.tabs {
  div {
    padding: 20px;
  }
}

.fullScreenIcon {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
}

.fullScreenIcon:hover {
  color: #409eff;
}

.el-timeline-item__node {
  background-color: transparent !important;
}

.el-icon-location-outline {
  color: #1890ff;
  font-size: 20px;
}

.allNumContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px;

  .allNum {
    width: 100px;
    text-align: center;
    font-weight: bold;
    margin-right: 200px;
  }
}

.card {
  margin: 20px 0px;
}
// .car {
//   // width: 100%;
//   // height: 100%;
//   /* background-color: green; */
//   // margin-top: -10px;
// }
.car tr td:first-child {
  width: 100px;
  text-align: right;
}
.car tr td:last-child {
  color: blue;
  font-size: 12px;
}
.x2color {
  color: #606266;
}

.flex-layout {
  display: flex;
  align-items: center;

  div {
    width: 200px;
    padding: 5px 0px;
  }

  .address {
    min-width: 300px !important;
  }
}

.el-timeline-item__timestamp,
.is-top {
  font-size: 1.17em;
  color: #202020;
}

.el-timeline-item__content {
  margin: 5px 0px !important;

  div {
    padding: 5px 0px;
  }
}

.marginView {
  margin: 1em 0;
}

.el-timeline {
  padding: 0px !important;
}

.imgContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  img {
    width: 200px;
    height: 200px;
    margin-right: 20px;
  }
}
</style>